<template>
  <div class="index-main">
    <!-- top区域 -->
    <div class="top-container">
      <el-menu
        class="el-menu-horizontal-demo"
        mode="horizontal"
        background-color="#262626"
        text-color="#AEAEAE"
      >
        <el-menu-item index="1" class="icon">
          <a href="#/admin/myinfo/message">
            <i class="el-icon-chat-square"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="2" class="icon">
          <a href="#/admin/myinfo/myindex">
            <i class="el-icon-user"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="3" class="icon">
          <a href="#/admin/myinfo/collection">
            <!-- <i class="el-icon-collection-tag"></i> -->
            <img
              src="../../assets/images/heart_icon.png"
              alt="红心图标"
              class="icon_size"
            />
          </a>
        </el-menu-item>
        <el-menu-item index="4" class="icon">
          <a href="#/admin/myinfo/uploadshow">
            <i class="el-icon-upload"></i>
          </a>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 搜索区域 -->
    <div class="select_search">
      <div class="div_1">
        <el-button class="uploadbutton_style" @click="goUpload()"
          >去上传</el-button
        >
      </div>
      <div class="div_2">
        <el-select placeholder="选择类别" v-model="formLabelAlign.typeid">
          <el-option label="环境-3D" value="1"></el-option>
          <el-option label="艺术品-3D" value="2"></el-option>
          <el-option label="植物-3D" value="3"></el-option>
          <el-option label="物品-3D" value="4"></el-option>
          <el-option label="粒子动画-3D" value="5"></el-option>
          <el-option label="艺术品-2D" value="6"></el-option>
          <el-option label="视频" value="7"></el-option>
          <el-option label="材料" value="8"></el-option>
          <el-option label="音乐" value="9"></el-option>
        </el-select>
      </div>
      <div class="div_3">
        <el-input
          type="text"
          id="search"
          v-model="formLabelAlign.goodname"
        ></el-input>
      </div>
      <div class="div_4">
        <el-button
          class="searchbutton"
          style="color: white"
          @click="getUploadAllgoodsDataQuery()"
        ><i class="el-icon-search"></i>
        </el-button>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="index-buttom">
      <div class="classes" v-for="type in types" :key="type.typeid">
        <div class="text">
          <span class="chinese">{{type.typename}}</span>
          <span class="english">{{formatStatus(type.typename)}}</span>
          <a href="#/admin/goods/classes"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <div class="div_">
          <div 
            class="div_n"
            v-for="good in type.goods"
            :key="good.goodid"
          >
            <el-button class="floatbutton" @click="getMygoodsInfo(good)"
              >编辑</el-button
            >
            <img 
              :src="good.coverurl"
              alt="轮播图片"
              class="img_size"
            />
            <span class="floattext">{{good.goodname}}</span>
          </div>
        </div>
        <!-- <ul class="class_ul">
          <li class="line" @click="dialogVisible = true">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>

          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul> -->
      </div>
      <!-- 编辑信息 -->
      <el-dialog
        :visible.sync="dialogVisible"
        title="编辑信息"
        class="changeinfo"
        show-close="false"
        close-on-press-escape
        :model="tableDetail"
      >
      <!-- 利用el-dialog包含内容设计header的相关内容-->
      <!-- 编辑信息body具体内容开始-->
        <!-- 上传表单区域 -->
        <el-form
          :model="tableDetail"
          id="changeForm"
          label-width="80px"
        >
          <!-- 上传封面图、上传预览图 -->
          <div class="upload_image">
            <el-form-item prop="imgUrl" label-width="0px">
              <!-- 上传封面图 -->              
              <div id="div1">
                <span class="text_style">封面图</span>             
                <el-upload
                  class="avatar-uploader"
                  action="https://imct.oss-cn-beijing.aliyuncs.com"
                  accept="image/png,image/gif,image/jpg,image/jpeg"
                  :limit="1"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list=true
                  :file-list="fileList1"
                  :http-request="toUploadfile1"
                  v-if="tableDetail.coverurl == ''"
                  :on-change="handleChange"
                >
                  <i class="el-icon-picture avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
            <div class="img_button">
              <img
                v-if='tableDetail.coverurl'
                referrerpolicy="no-referrer"
                :src="tableDetail.coverurl"
                alt="加载图片失败"
                class="avatar-uploader-icon1"
              />
              <el-button v-if='tableDetail.coverurl' class="coverbutton">
                <i class="el-icon-delete" @click="deleteImg()"></i>
              </el-button>
            </div>

            <el-form-item label-width="0px">
              <!-- 上传预览图 -->
              <div id="div2">
                <div class="title_button">
                  <span class="text_style">预览图</span>
                  <el-upload
                    class="avatar-uploader_1"
                    action="https://imct.oss-cn-beijing.aliyuncs.com"
                    accept="image/png,image/gif,image/jpg,image/jpeg"
                    :file-list="fileList2"
                    :http-request="toUploadfile2"
                  >
                    <i class="el-icon-plus avatar-uploader-icon_1"
                    ></i>
                  </el-upload>
                </div>
                <div class="img_button_1" v-for="pic in tableDetail.pics" :key="tableDetail.userid">
                  <img
                    v-if='pic.picurl'
                    referrerpolicy="no-referrer"
                    :src="pic.picurl"
                    alt="加载图片失败"
                    class="avatar-uploader-icon_11"
                  />
                  <el-button v-if='pic.picurl' class="coverbutton_1">
                    <i class="el-icon-delete" @click="deleteImg()"></i>
                  </el-button>
                </div>
              </div>
            </el-form-item>
            
          </div>
          <!-- 编辑信息 -->
          <div class="upload_changeinfo">
            <el-form-item label="价格">
              <el-input v-model="tableDetail.price"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="tableDetail.goodname"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select placeholder="选择类别" v-model="tableDetail.type">
                <el-option label="环境-3D" value="环境-3D"></el-option>
                <el-option label="艺术品-3D" value="艺术品-3D"></el-option>
                <el-option label="植物-3D" value="植物-3D"></el-option>
                <el-option label="物品-3D" value="物品-3D"></el-option>
                <el-option label="粒子动画-3D" value="粒子动画-3D"></el-option>
                <el-option label="艺术品-2D" value="艺术品-2D"></el-option>
                <el-option label="视频" value="视频"></el-option>
                <el-option label="材料" value="材料"></el-option>
                <el-option label="音乐" value="音乐"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="简介">
              <el-card shadow="always" class="box-card">
                <el-input 
                  v-model="tableDetail.introduction"
                  clearable
                  type="textarea"
                  :rows="6">
                </el-input>
              </el-card>
            </el-form-item> -->
            <quillEditor
              v-model="tableDetail.introduction"
              ref="myQuillEditor"
              :options="editorOption"
              @focus="onEditorFocus($event)"
              @blur="onEditorBlur($event)"
              @change="onEditorChange($event)"
              class="editor"
            ></quillEditor>
            <el-form-item action method="post" enctype="multipart/form-data" id="uploadFormMulti">
              <input
                style="display: none"
                :id="uniqueId"
                type="file"
                name="file"
                multiple
                accept="image/jpg, image/jpeg, image/png, image/gif"
                @change="uploadImg('uploadFormMulti')"
              />
            </el-form-item>
          </div>
          <!-- 点击按钮 -->
          <div class="commit_changeinfo">
              <el-button class="commitbutton" @click="doMyGoodsModify()"> 提交 </el-button>
              <el-button class="removebutton" @click="doOffshelfGoods(tableDetail.goodid)">下架</el-button>
          </div>
        </el-form>
      <!-- 编辑信息具体内容结束-->
      </el-dialog>
      <br />
      <!-- <div class="classes">
        <div class="text">
          <span class="chinese">艺术品-3D</span>
          <span class="english">Artwork-3D</span>
          <a href="#/admin/goods/goodsindex"
            ><i class="el-icon-arrow-right"></i
          ></a>
        </div>
        <div class="div_">
          <div class="div_n" v-for="n in 4" :key="n">
            <img src="../../common/picture/ZT.png" />
            <span class="floattext">名称</span>
          </div>
        </div>
        <ul class="class_ul">
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
          <li class="line">
            <a href="_blank" class="imgclass">
              <img class="img2" src="~images/1.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getUploadAllData, doModify, getGoodDetail,doOffshelf } from "crm/myinfo/myinfo.js";
import { uploadToAli } from "@/utils/alioss.js";
import { doUpload } from "../../crm/myinfo/myinfo";
import { EventBus } from "bus/mybus.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "uploadshow",
  components: {
    quillEditor
  },
  data() {
    return {
      uniqueId: "uniqueId_1S",
      content: "", // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions
        },
        theme: "snow",
        placeholder: "请输入正文"
      },
      textarea: '',
      fileList1: [],
      fileList2: [],
      fileList3: [],
      file: {
        url: "",
      },
      dialogVisible: false,
      dialogVisible_img: false,
      dialogImageUrl:"",
      formLabelAlign: {
        coverurl: "",
        covername: "",
        typeid: undefined,
        goodname: "",
        documenturl: "",
        documentname: "",
        price: "",
        introduction: "",
        pics: [
          {
            picname: "",
            picurl: "",
          },
        ],
      },
      //所有商品数据
      tableData: [],
      types: [],
      types_1: [],
      typename: [],
      typeid: [],
      goods: [
        {
          goodid: 1,
          coverurl: "",
          covername: "",
          goodstatus: 0,
          goodname: "",
          price: "",
        },
      ],
      total: 0,
      //商品详情
      tableDetail:
      {
        goodid: "",
        goodurlname: "",
        price: "",
        type: "",
        goodname: "",
        coverurl: "",
        covername: "",
        user: "",
        userid: "1",
        pics: [
          {
            picurl: "",
            picname: "",
          },
        ],
        documenturl: "",
        documentname: "",
        transaction: [
          {
            date: "",
            price: "",
            owner: "",
          },
        ],
        introduction: "",
        tokenid: 0,
      },
    };
  },
  // computed: {
  //   //当前富文本实例
  //   editor() {
  //     return this.$refs.myQuillEditor.quill;
  //   }
  // },
  // mounted() {
  //   var _this = this;
  //   var imgHandler = async function(image) {
  //     if (image) {
  //       var fileInput = document.getElementById(_this.uniqueId); //隐藏的file文本ID
  //       fileInput.click(); //加一个触发事件
  //     }
  //   };
  //   _this.editor.getModule("toolbar").addHandler("image", imgHandler);
  // },
  created() {
    this.getUploadAllgoodsData();
    // this.getMygoodDetail();
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange() {},
    uploadImg: async function() {
      var _this = this;
      //构造formData对象
      var formData = new FormData();
      formData.append("file", document.getElementById(_this.uniqueId).files[0]);
      try {
        //调用上传文件接口
        this.$http.productapi.uploadImgReq(formData).then(res => {
          //返回上传文件的地址
          let url = res;
          if (url != null && url.length > 0) {
            let Range = _this.editor.getSelection();
            url = url.indexOf("http") != -1 ? url : "http:" + url;
            //上传文件成功之后在富文本中回显(显示)
            _this.editor.insertEmbed(
              Range != null ? Range.index : 0,
              "image",
              url
            );
          } else {
            _this.$message.warning("图片上传失败");
          }
          //成功之后,将文件的文本框的value置空
          document.getElementById(_this.uniqueId).value = "";
        });
      } catch ({ message: msg }) {
        document.getElementById(_this.uniqueId).value = "";
        _this.$message.warning(msg);
      }
    },
    //去上传跳转
    goUpload() {
      this.$router.push("/admin/myinfo/upload");
    },

    // //选择分类
    // handleCheckedCitiesChange(value) {
    //   let checkedCount = value.length;
    //   this.checkAll = checkedCount === this.cities.length;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.cities.length;
    // },

    //删除图片
    deleteImg() {
      this.$confirm("是否删除该照片?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.fileList1 = [];
          this.tableDetail.coverurl = "";
          // this.$refs.img.src = this.imageUrl;
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //缩略图操作
    // handleRemove(file) {
    //   //console.log(file);
    //   file.url == "";
    // },

    //改变图片（传本地图片）
    handleChange(file){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      // reader.readAsDataURL(file);
      if(file){
        reader.readAsDataURL(file);
      }
      //转base64
      reader.onload = function(e) {
      _this.tableDetail.coverurl = e.target.result //将图片路径赋值给src
      }
    },

    //缩略图删除
    handleRemove(file) {
      const uploadFiles = this.$refs.pictureUpload.uploadFiles;
      console.log(uploadFiles);
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["picurl"] === file.picurl) {
          uploadFiles.splice(i, 1);
          this.fileList2.splice(i, 1);
        }
      }
    },

    //缩略图放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible_img = true;
    },

    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },

    async toUploadfile1(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };

      this.fileList1.push(fileObj);
      this.formLabelAlign.coverurl = this.fileList1[0].url;
      this.formLabelAlign.covername = this.fileList1[0].name;
      this.tableDetail.coverurl = this.fileList1[0].url;
      // console.log(this.formLabelAlign.coverurl);
    },

    async toUploadfile2(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        picname: file.file.name,
        picurl: uploadUrl,
      };

      this.fileList2.push(fileObj);
      console.log(fileObj);
      console.log(this.fileList2);
    },

    //删除前询问
    beforeRemove(file) {
      let a = true;
      if (file && file.status === "success") {
        //放在文件上传成功的判断条件里，是为了防止未上传文件就执行删除操作
        a = this.$confirm(`确定移除 ${file.name}？`);
      }
      return a;
    },
    onRemove3(file, fileList4) {
      this.fileList3 = [];
      this.formLabelAlign.documenturl = "";
      this.formLabelAlign.documentname = "";
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(file.raw);
    // },

    //获取页面初始化数据..
    getUploadAllgoodsData() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      // console.log(payload.userid);
      getUploadAllData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.types = res.data.types;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },

    //类型对应
    formatStatus(row) {
      switch (row) {
        case "环境-3D":
          return "Environment-3D";
        case "艺术品-3D":
          return "Artwork-3D";
        case "植物-3D":
          return "Plants-3D";
        case "物品-3D":
          return "Artical-3D";
        case "粒子动画":
          return "Particle";
        case "艺术品-2D":
          return "Artwork-2D";
        case "视频":
          return "Video";
        case "材料":
          return "Meterial";
        case "音乐":
          return "Music";    
      }
    }, 

    //获取我上传商品查询结果
    getUploadAllgoodsDataQuery() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.typeid = this.formLabelAlign.typeid;
      payload.goodname = this.formLabelAlign.goodname;
      getUploadAllData(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.types = res.data.types;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },    

    //编辑信息
    getMygoodsInfo(good) {
      this.dialogVisible = true;
      // console.log(good);
      // console.log(good.goodid);
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.goodid = good.goodid;
      this.goods.goodstatus = good.goodstatus;
      getGoodDetail(payload)
        .then((res) => {
          if (res.status == "OK") {
            // this.getUploadAllgoodsData();
            this.tableDetail = res.data;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });   
    },

    doMyGoodsModify() {
      let payload = {};
      payload.goodid = this.tableDetail.goodid;
      payload.price = this.tableDetail.price+'';
      //注意price的类型！！！！！
      payload.type = this.tableDetail.type;
      payload.goodname = this.tableDetail.goodname;
      payload.coverurl = this.tableDetail.coverurl;
      payload.covername = this.tableDetail.covername;
      payload.pics = this.tableDetail.pics;
      payload.documenturl = this.tableDetail.documenturl;
      payload.documentname = this.tableDetail.documentname;
      payload.introduction = this.tableDetail.introduction;
      payload.userid = Number(localStorage.getItem("userid"));
      // let price_number = /^[0-9]*$/;
      if (
        payload.price !== payload.price.replace(/[^0-9.]/g,'')
      ){
        this.$message.info("请输入数字!");
      } else if (
        payload.goodid == "" ||
        payload.price == "" ||
        payload.type == "" ||
        payload.goodname == "" ||
        payload.coverurl == "" ||
        payload.covername == "" ||
        payload.pics == [] ||
        payload.documenturl == "" ||
        payload.documentname == "" ||
        payload.introduction == "" ||
        payload.userid == ""
      ) {
        this.$message.info("请检查是否上传完整!");
      } else {
      var fileList2Filter = this.fileList2.filter(
        (item) => delete item.status && delete item.uid
      );
      payload.pics = fileList2Filter;
      doModify(payload)
        .then((res) => {
          if (res.data.status !== "OK") {
            alert("编辑信息失败");
            return;
          } else if (res.data.status == "OK") {
            alert("编辑信息成功！");
            this.getUploadAllgoodsData();
            this.dialogVisible = false;
            // this.fileList1[0].url = this.tableDetail.coverurl;
          }
        })
        .catch((err) => {});
      }
    },

    // 商品下架
    doOffshelfGoods(goodid) {
      let payload = {};
      payload.userid = Number(localStorage.getItem("userid"));
      payload.goodid = goodid;
      doOffshelf(payload)
        .then((res) => {
          if (res.data.status == "OK") {
            alert("下架成功！");
            this.getUploadAllgoodsData();
            this.dialogVisible = false;
          } else {
            alert("下架失败！");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    // //点击转卖之后跳出弹出框
    // gotoSold() {
    //   this.dialogVisible = false;
    //   this.dialogVisible1 = true;
    // },
    // 用户通过点击关闭图标或遮罩关闭 Dialog 时起效的回调函数
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
  },
};
</script>
<style scoped>
.index-main {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0%;
  flex-direction: column;
}
.top-container {
  width: 100%;
  height: 56px;
  margin: 0%;
  padding: 0%;
  background-color: #262626;
  display: flex;
  flex-direction: row;
}
.el-menu {
  height: 55px;
  width: 300px;
  border-bottom: solid 1px #262626;
  position: relative;
  left: 40%;
}
.icon {
  width: 64px;
  height: 56px;
}
.icon_size {
  width: 30px;
  height: 25px;
}
.download_icon {
  width: 64px;
  height: 56px;
  margin-left: 20px;
  font-size: 28px;
}
.icon i {
  font-size: 28px;
}
.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0%;
  display: flex;
  flex-direction: row;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
.div_1 {
  position: relative;
  left: 6%;
}
.div_2 {
  position: relative;
  left: 54%;
}
.div_3 {
  position: relative;
  left: 54%;
}
.div_4 {
  position: relative;
  left: 54%;
}
.searchbutton {
  background: #2F2F2F;
  border: 1px solid #2F2F2F;
}
.uploadbutton_style {
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #fdfdfd;
  background-color: #9f642f;
  font-size: 28px;
}
.select_search /deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
  width: 250px;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.classes {
  display: flex;
  flex-direction: column;
}
.class_ul {
  margin-top: 30px;
  margin-left: 1%;
}
.line {
  width: 23%;
  height: 300px;
  list-style-type: none;
  margin-left: 20px;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}
.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
.text {
  display: flex;
  font-family: "Youshebiaotihei";
}
.chinese {
  color: #a2662f;
  font-size: 28px;
  margin-left: 80px;
}
.english {
  color: #ead3c2;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 5px;
}
.div_ {
  width: 95%;
  overflow: hidden;
  padding: 15px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 70px;
}
.div_n {
  position: relative;
  width: calc(25% - 30px);
  height: 250px;
  float: left;
  margin-right: 30px;
  margin-bottom: 20px;
}
/* 图片大小 */
.img_size {
  /* width: 300px;
  height: 250px; */
  width: 100%;
  height: 100%; 
}
/* 悬浮按钮 */
.floatbutton {
  position: absolute;
  bottom: 10px;
  left: 5px;
  color: #fdfdfd;
  background-color: #9d632e;
  font-family: "Youshebiaotihei";
  font-size: 28px;
  border: #9d632e;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 8px;
  right: 16px;
  color: #fdfdfd;
  font-family: "Youshebiaotihei";
  font-size: 28px;
}
.el-icon-arrow-right {
  color: antiquewhite;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 8px;
}
/* 编辑信息 */
/* header部分 */
/deep/.el-dialog{
  width: 500px;
}
/deep/.el-dialog__header {
  background-color: #AEAEAE;
  width: 500px;
}
/deep/.el-dialog__title {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 36px;
  line-height: 24px;
}
/deep/.el-dialog__headerbtn {
  position: absolute;
  top: 13px;
  right: -9px;
  font-size: 28px;
}
/deep/.el-dialog__headerbtn i{
  color: #eeeeee;
}
/deep/.el-dialog__body {
  background-color: #1e1e1e;
  width: 500px;
}
/deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
/* body部分 */
.upload_image {
  margin-top: 15px;
  margin-left: 15px;
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
  height: 225px;
}
/* #div1,
#div2 {
  display: inline-block;
} */
#div2 {
  margin-left: 50px;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}
.img_suo {
  width: 100px;
  height: 100px;
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
}
.upload_changeinfo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  display: inline-block;
  margin-top: 32px;
}
#changeForm >>> .el-form-item__label {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
}
/* .div_ {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
}
.div_n {
  width: calc(25%-30px);
  margin-right: 50px;
} */
.text_style {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 18px;
}
#changeForm /deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 0px solid #292929;
  font-family: "Youshebiaotihei";
  color: #787878;
  font-size: 20px;
  width: 360px;
}
.box-card {
  background-color: #2f2f2f;
  width: 360px;
  height: 150px;
  border: #2f2f2f;
}
/deep/ .el-textarea__inner {
  color: #787878;
  background-color: #2f2f2f;
  border: 1px solid #2f2f2f;
  min-height: 110px;
}
/deep/ .el-card__body {
  padding: 0px;
}
.commit_changeinfo{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  display: inline-block;
  margin-top: 20px;
}
.commitbutton {
  height: 60px;
  width: 100px;
  padding: 0%;
  margin: 0%;
  line-height: 40px;
  font-size: 36px;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #D77025;
  border: #D77025;
  position: relative;
  left: 60%;
}
.removebutton {
  height: 60px;
  width: 100px;
  padding: 0%;
  margin: 0%;
  line-height: 40px;
  font-size: 36px;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #aeaeae;
  border: #aeaeae;
  position: relative;
  left: 100%;
}
/* 上传图片样式 */
.avatar-uploader /deep/ .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 180px;
  height: 160px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar-uploader-icon1 {
  font-size: 2px;
  color: #8c939d;
  width: 180px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  position: relative;
  left: -50px;
  top: 50px;
}
.img_button {
  display: flex;
  flex-direction: column;
}
.title_button {
  display: flex;
  flex-direction: row;  
}
.img_button_1 {
  display: flex;
  flex-direction: column;
  margin:10px 5px 0px 0px;
  float:left;
}
.coverbutton {
  height: 40px;
  width: 180px;
  margin: 0%;
  font-family: "Youshebiaotihei";
  font-size: 20px;
  color: #a0a0a0;
  background-color: #4b4b4b;
  position: relative;
  left: -50px;
  top: 50px;
}
.avatar-uploader_1 /deep/ .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-left: 10px;
  overflow: hidden;
}
.avatar-uploader_1 /deep/ .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.avatar-uploader-icon_1 {
  font-size: 3px;
  color: #8c939d;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.avatar-uploader-icon_11 {
  font-size: 2px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: relative;
}
.coverbutton_1 {
  height: 40px;
  width: 100px;
  margin: 0%;
  font-family: "Youshebiaotihei";
  font-size: 20px;
  color: #a0a0a0;
  background-color: #4b4b4b;
  position: relative;
}
/* 富文本框 */
.editor {
  line-height: normal !important;
  height: 200px;
  width: 400px;
  margin-left: 40px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>